{% extends 'loyout.html' %}
{% block html %}
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>

            <div style="margin: 10px 0;">
                 <a class="btn btn-primary" href="/add_students/">添加</a>
                 <a class="btn btn-info" id="addModal">对话框添加</a>
            </div>
            <table>
                <div id="shadow" class="shadow hide"></div>
                <div id="add-modal" class="add-modal hide">
                    <p>
                        姓名:<input id="addName" type="text" name="name" placeholder="姓名" /><span id="addError" style="color: red"></span>
                    </p>
                    <p>
                         班级:
                        <select id="addClassId" name="class_id">
                            {% for row in class_list %}
                                <option value="{{ row.id }}">{{row.title}}</option>
                            {% endfor %}

                        </select>
                    </p>
                    <input id="btnAdd" type="button" value="提交" />
                    <input id="cancleModal" type="button" value="取消" />
                </div>
                <!--编辑框-->
                <div id="edit-modal" class="add-modal hide">
                    <h3>编辑学生信息</h3>
                    <p>
                        姓名:<input id="editName" type="text" name="name" placeholder="姓名" /><span id="editError" style="color: red"></span>
                        <input type="text" id="editId" style="display: none" />
                    </p>
                    <p>
                         班级:
                        <select id="editClassId" name="class_id">
                            {% for row in class_list %}
                                <option value="{{ row.id }}">{{row.title}}</option>
                            {% endfor %}

                        </select>
                    </p>
                    <input id="btnEdit" type="button" value="更新" />

                </div>
            </table>

                <table class="table table-striped table-bordered table-hover">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>学生姓名</th>
                            <th>所属班级</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                            {% for row in result %}
                                <tr>
                                    <td>{{row.student_id}}</td>
                                    <td>{{row.student_name}}</td>
                                    <td clsid="{{ row.class_id}}">{{row.title}}</td>
                                    <td><a class="glyphicon glyphicon-pencil" href="/edit_students/?nid={{row.student_id }}"></a>
                                        |
                                        <a class="btn_edit glyphicon glyphicon-hourglass">对话框编辑</a>
                                        |
                                        <a class="glyphicon glyphicon-trash" href="/del_students/?nid={{row.student_id}}"></a></td>

                                </tr>

                            {% endfor %}
                    </tbody>
                </table>
    </body>
    </html>
{% endblock %}
{% block css %}
     <style>
            .hide{
            display: none;
        }
            .shadow{
                position: fixed;
                left: 0;
                right: 0;
                bottom: 0;
                top: 0;
                background-color: black;
                opacity: 0.5;
                z-index: 999;

            }
            .add-modal{
                 position: fixed;
                left: 50%;
                top: 50%;
                width: 400px;
                height: 300px;
                background-color: white;
                margin-left: -200px;
                margin-top: -200px;
                z-index: 1000;

            }
        </style>
{% endblock %}
{% block js %}
    <script src="/static/jquery-3.5.1.js"></script>
        <script>
            $(function () {
                $('#addModal').click(function () {
                                document.getElementById('shadow').classList.remove('hide');
                                document.getElementById('add-modal').classList.remove('hide');
                })

                $('#cancleModal').click(function () {
                                document.getElementById('shadow').classList.add('hide');
                                document.getElementById('add-modal').classList.add('hide');




                })
                $('.btn_edit').click(function () {
                    $('#shadow,#edit-modal').removeClass('hide');
                    var tds=$(this).parent().prevAll();
                    var student_id=$(tds[2]).text();
                    var student_name=$(tds[1]).text();
                    var class_id=$(tds[0]).attr('clsid');
                    $("#editName").val(student_name);
                    $('#editId').val(student_id);
                    $('#editClassId').val(class_id);
                    //获取了学生id和学生姓名和班级id
                    console.log(student_id,student_name,class_id);
                })
                $('#btnEdit').click(function () {
                    $.ajax({
                        url:'/modal_edit_students/',
                        type:'POST',
                        data:{'nid':$('#editId').val(),'name':$('#editName').val(),'class_id':$('#editClassId').val()},
                        dataType:'JSON',

                        success:function (arg) {
                            if (arg.status){
                                location.reload();
                            }else{
                                $('#editError').text(arg.message);
                            }

                        }
                    })


                })

                $('#btnAdd').click(function () {
                    $.ajax({
                        url:'/modal_add_students/',
                        type:'POST',
                        data:{'name':$('#addName').val(),'class_id':$("#addClassId").val()},
                        success:function (arg) {
                            arg=JSON.parse(arg)

                            if (arg.status){
                                location.reload()
                            }else{
                                $('#addError').text(arg.message)
                            }


                        }

                    })

                })


            })

        </script>
{% endblock %}